<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相机销售管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/common.js"></script>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<!-- 导航栏 -->
<nav class="bg-gray-800 text-white">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-camera-retro text-2xl"></i>
            <span class="text-xl font-bold">相机销售管理系统</span>
        </div>
        <div class="hidden md:flex space-x-6">
            <a href="/" class="hover:text-gray-300 transition-colors duration-200 flex items-center">
                <i class="fa fa-home mr-1"></i> 首页
            </a>
            <a href="/customers" class="hover:text-gray-300 transition-colors duration-200 flex items-center">
                <i class="fa fa-users mr-1"></i> 用户管理
            </a>
            <a href="/cameras" class="hover:text-gray-300 transition-colors duration-200 flex items-center">
                <i class="fa fa-camera mr-1"></i> 相机管理
            </a>
            <a href="/cameraTypes" class="hover:text-gray-300 transition-colors duration-200 flex items-center">
                <i class="fa fa-tags mr-1"></i> 相机类型
            </a>
            <a href="/orders" class="hover:text-gray-300 transition-colors duration-200 flex items-center">
                <i class="fa fa-shopping-cart mr-1"></i> 订单管理
            </a>
        </div>
        <div class="md:hidden">
            <button id="menu-toggle" class="focus:outline-none">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </div>
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="hidden md:hidden bg-gray-700 px-4 py-2 space-y-3">
        <a href="/" class="block hover:text-gray-300 transition-colors duration-200">首页</a>
        <a href="/customers" class="block hover:text-gray-300 transition-colors duration-200">用户管理</a>
        <a href="/cameras" class="block hover:text-gray-300 transition-colors duration-200">相机管理</a>
        <a href="/cameraTypes" class="block hover:text-gray-300 transition-colors duration-200">相机类型</a>
        <a href="/orders" class="block hover:text-gray-300 transition-colors duration-200">订单管理</a>
    </div>
</nav>

<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-6">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 数据概览卡片 -->
        <div class="bg-white rounded-lg shadow p-6 transform hover:scale-105 transition-all duration-300">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-700">用户总数</h3>
                <div class="bg-blue-100 p-3 rounded-full">
                    <i class="fa fa-users text-blue-500 text-xl"></i>
                </div>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="customerCount">0</p>
            <p class="text-sm text-gray-500 mt-2">较上月 <span class="text-green-500">+12%</span></p>
        </div>

        <div class="bg-white rounded-lg shadow p-6 transform hover:scale-105 transition-all duration-300">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-700">相机总数</h3>
                <div class="bg-green-100 p-3 rounded-full">
                    <i class="fa fa-camera text-green-500 text-xl"></i>
                </div>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="cameraCount">0</p>
            <p class="text-sm text-gray-500 mt-2">较上月 <span class="text-green-500">+8%</span></p>
        </div>

        <div class="bg-white rounded-lg shadow p-6 transform hover:scale-105 transition-all duration-300">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-700">订单总数</h3>
                <div class="bg-purple-100 p-3 rounded-full">
                    <i class="fa fa-shopping-cart text-purple-500 text-xl"></i>
                </div>
            </div>
            <p class="text-3xl font-bold text-gray-800" id="orderCount">0</p>
            <p class="text-sm text-gray-500 mt-2">较上月 <span class="text-green-500">+15%</span></p>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-700 mb-4">销售趋势</h3>
            <div class="h-80">
                <canvas id="salesChart"></canvas>
            </div>
        </div>

        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-semibold text-gray-700 mb-4">相机类型分布</h3>
            <div class="h-80">
                <canvas id="cameraTypeChart"></canvas>
            </div>
        </div>
    </div>

    <!-- 最近订单 -->
    <div class="bg-white rounded-lg shadow p-6 mt-6">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-semibold text-gray-700">最近订单</h3>
            <a href="/orders" class="text-blue-500 hover:underline text-sm">查看全部</a>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full">
                <thead>
                <tr class="bg-gray-100">
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单ID</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">客户</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">相机</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">价格</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">日期</th>
                </tr>
                </thead>
                <tbody id="recentOrdersTable">
                <!-- 订单数据将通过JavaScript动态填充 -->
                <tr class="text-center">
                    <td colspan="6" class="px-4 py-8 text-gray-500">加载中...</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <div class="flex items-center space-x-2">
                    <i class="fa fa-camera-retro text-xl"></i>
                    <span class="text-lg font-bold">相机销售管理系统</span>
                </div>
                <p class="text-sm text-gray-400 mt-2">专业的相机销售管理解决方案</p>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                    <i class="fa fa-github text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                    <i class="fa fa-twitter text-xl"></i>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200">
                    <i class="fa fa-linkedin text-xl"></i>
                </a>
            </div>
        </div>
        <div class="border-t border-gray-700 mt-6 pt-6 text-center text-sm text-gray-400">
            &copy; 2025 相机销售管理系统. 保留所有权利.
        </div>
    </div>
</footer>

<script>
    // 移动端菜单切换
    document.getElementById('menu-toggle').addEventListener('click', function() {
        const mobileMenu = document.getElementById('mobile-menu');
        mobileMenu.classList.toggle('hidden');
    });

    // 获取数据统计
    function fetchDashboardData() {
        // 获取用户总数
        ajaxRequest('/api/customers/count', 'GET', null,
            (data) => {
                document.getElementById('customerCount').textContent = data.count;
            },
            (error) => {
                console.error('获取用户总数失败:', error);
            }
        );

        // 获取相机总数
        ajaxRequest('/api/cameras/count', 'GET', null,
            (data) => {
                document.getElementById('cameraCount').textContent = data.count;
            },
            (error) => {
                console.error('获取相机总数失败:', error);
            }
        );

        // 获取订单总数
        ajaxRequest('/api/orders/count', 'GET', null,
            (data) => {
                document.getElementById('orderCount').textContent = data.count;
            },
            (error) => {
                console.error('获取订单总数失败:', error);
            }
        );

        // 获取最近订单
        ajaxRequest('/api/orders/recent', 'GET', null,
            (data) => {
                const tableBody = document.getElementById('recentOrdersTable');
                tableBody.innerHTML = '';

                if (data.length === 0) {
                    tableBody.innerHTML = `
                            <tr class="text-center">
                                <td colspan="6" class="px-4 py-8 text-gray-500">暂无数据</td>
                            </tr>
                        `;
                    return;
                }

                data.forEach(order => {
                    const statusClass = order.status === '已完成' ? 'bg-green-100 text-green-800' :
                        order.status === '处理中' ? 'bg-blue-100 text-blue-800' :
                            'bg-red-100 text-red-800';

                    const tr = document.createElement('tr');
                    tr.className = 'border-b border-gray-200 hover:bg-gray-50 transition-colors duration-200';

                    tr.innerHTML = `
                            <td class="px-4 py-3 whitespace-nowrap">${order.id}</td>
                            <td class="px-4 py-3 whitespace-nowrap">${order.customerName}</td>
                            <td class="px-4 py-3 whitespace-nowrap">${order.cameraName}</td>
                            <td class="px-4 py-3 whitespace-nowrap">¥${order.price.toFixed(2)}</td>
                            <td class="px-4 py-3 whitespace-nowrap">
                                <span class="px-2 py-1 text-xs rounded-full ${statusClass}">
                                    ${order.status}
                                </span>
                            </td>
                            <td class="px-4 py-3 whitespace-nowrap">${new Date(order.createTime).toLocaleDateString()}</td>
                        `;

                    tableBody.appendChild(tr);
                });
            },
            (error) => {
                console.error('获取最近订单失败:', error);
                document.getElementById('recentOrdersTable').innerHTML = `
                        <tr class="text-center">
                            <td colspan="6" class="px-4 py-8 text-red-500">获取数据失败</td>
                        </tr>
                    `;
            }
        );
    }

    // 初始化图表
    function initCharts() {
        // 销售趋势图
        const salesCtx = document.getElementById('salesChart').getContext('2d');
        new Chart(salesCtx, {
            type: 'line',
            data: {
                labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                datasets: [{
                    label: '销售额 (万元)',
                    data: [65, 59, 80, 81, 56, 85],
                    fill: true,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    tension: 0.3
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 相机类型分布图
        const typeCtx = document.getElementById('cameraTypeChart').getContext('2d');
        new Chart(typeCtx, {
            type: 'doughnut',
            data: {
                labels: ['单反相机', '微单相机', '卡片相机', '运动相机', '其他'],
                datasets: [{
                    data: [35, 25, 20, 15, 5],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                        'rgba(153, 102, 255, 0.7)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    }
                }
            }
        });
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        fetchDashboardData();
        initCharts();
    });
</script>
</body>
</html>
